<template>
  <div>
    <el-button type="text" @click="dialogVisible = true">点击查看详情</el-button>
    <el-dialog
      v-if="this.data"
      title="订单详情"
      :visible.sync="dialogVisible"
      width="70%">
      <el-table
        :data="this.data"
        style="width: 100%;margin-bottom: 20px;"
        row-key="id"
        border
        default-expand-all
        :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
        <el-table-column
          prop="type"
          label="类型"
          sortable
          width="180">
          <template v-slot="scope">
            <span v-if="scope.row.type === 'item'">单品</span>
            <span v-else>套餐</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="name"
          label="名称"
          sortable
          width="180">
        </el-table-column>
        <el-table-column
          label="参数"
          sortable
          width="300">
          <template v-slot="scope">
            <span v-for="(item, index) in scope.row.selectedOptions" :key="index">
              <div v-if="scope.row.type === 'item'">
                 <el-tag style="margin: 3px">{{ index }}{{ item }}</el-tag>
              </div>
             <div v-if="scope.row.type === 'package'">
               <div v-for="(ii, iindex) in item" :key=iindex>
                 <el-tag style="margin: 3px" type="danger">{{ ii.name }}</el-tag>
                 <span v-for="(iii, iiindex) in ii" :key="iiindex">
                 <el-tag v-if="iii !== ii.name" style="margin: 3px">
                   {{ iii }}
                 </el-tag>
                   </span>
               </div>
              </div>
            </span>
          </template>
        </el-table-column>
        <el-table-column
          sortable
          prop="price"
          label="单价">
        </el-table-column>
        <el-table-column
          sortable
          prop="amount"
          label="数量">
        </el-table-column>
        <el-table-column
          sortable
          prop="totalPrice"
          label="总价">
        </el-table-column>
      </el-table>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  props: {
    value: {
      type: String,
      required: false,
      default: undefined
    }
  },
  data () {
    return {
      dialogVisible: false,
      data: undefined
    }
  },
  created () {
    const preData = JSON.parse(this.value)
    const data = []
    for (const key in preData) {
      data.push(JSON.parse(preData[key]))
    }
    this.data = data
  }
}
</script>
